<template>
    <div class="font-inter bg-gray-50 min-h-screen flex flex-col">
      <!-- 顶部导航 -->
      <!-- <header class="bg-white shadow-sm">
        <div class="container mx-auto px-4 py-4 flex items-center justify-between">
          <div class="flex items-center space-x-2">
            <i class="fa fa-book text-primary text-2xl"></i>
            <span class="text-xl font-semibold text-dark">BookStore</span>
          </div>
          
          <nav class="hidden md:flex items-center space-x-6">
            <a href="#" class="text-dark hover:text-primary transition-colors">首页</a>
            <a href="#" class="text-dark hover:text-primary transition-colors">图书分类</a>
            <a href="#" class="text-dark hover:text-primary transition-colors">新书上架</a>
            <a href="#" class="text-dark hover:text-primary transition-colors">关于我们</a>
          </nav>
          
          <div class="flex items-center space-x-4">
            <button class="hidden md:block px-4 py-2 text-primary border border-primary rounded-md hover:bg-primary/5 transition-colors" @click="goToRegister">
              注册
            </button>
            <button class="md:hidden text-dark hover:text-primary" @click="toggleMenu">
              <i class="fa fa-bars text-xl"></i>
            </button>
          </div>
        </div>
      </header> -->
  
      <!-- 主内容区 -->
      <main class="flex-grow flex items-center justify-center p-4 md:p-8">
        <div class="w-full max-w-5xl bg-white rounded-2xl shadow-xl overflow-hidden">
          <div class="flex flex-col md:flex-row">
            <!-- 左侧图片区域 -->
            <div class="md:w-1/2 bg-gradient-blue p-8 md:p-12 flex items-center justify-center">
              <div class="text-center text-white">
                <i class="fa fa-book text-6xl mb-4 text-glow"></i>
                <h2 class="text-[clamp(1.5rem,3vw,2.5rem)] font-bold mb-4 text-glow">欢迎回来</h2>
                <p class="text-blue-100 mb-8 text-lg">探索知识的世界，开启阅读的旅程</p>
                <div class="hidden md:block transform transition-transform duration-500 hover:scale-105">
                  <img :src="bookImage" alt="读书插图" class="rounded-lg shadow-xl border-4 border-white/20 border-glow">
                </div>
              </div>
            </div>
            
            <!-- 右侧表单区域 -->
            <div class="md:w-1/2 p-8 md:p-12">
              <div class="mb-8">
                <h1 class="text-[clamp(1.5rem,3vw,2rem)] font-bold text-dark mb-2">登录您的账户</h1>
                <p class="text-muted">请输入您的邮箱和密码以继续</p>
              </div>
              
              <!-- 登录表单 -->
              <form @submit.prevent="handleLogin" class="space-y-6">
                <div class="space-y-2">
                  <label for="email" class="block text-sm font-medium text-dark">邮箱地址</label>
                  <div class="relative">
                    <span class="absolute inset-y-0 left-0 flex items-center pl-3 text-muted">
                      <i class="fa fa-envelope"></i>
                    </span>
                    <input 
                      type="email" 
                      id="email" 
                      name="email" 
                      v-model="email"
                      class="w-full pl-10 pr-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary/50 focus:border-primary outline-none transition-all"
                      placeholder="your@email.com" 
                      required
                    >
                  </div>
                </div>
                
                <div class="space-y-2">
                  <div class="flex items-center justify-between">
                    <label for="password" class="block text-sm font-medium text-dark">密码</label>
                    <a href="#" class="text-sm text-primary hover:text-primary/80 transition-colors" @click.prevent="forgotPassword">
                      忘记密码?
                    </a>
                  </div>
                  <div class="relative">
                    <span class="absolute inset-y-0 left-0 flex items-center pl-3 text-muted">
                      <i class="fa fa-lock"></i>
                    </span>
                    <input 
                      :type="showPassword ? 'text' : 'password'" 
                      id="password" 
                      name="password" 
                      v-model="password"
                      class="w-full pl-10 pr-10 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary/50 focus:border-primary outline-none transition-all"
                      placeholder="••••••••" 
                      required
                    >
                    <button 
                      type="button" 
                      id="togglePassword" 
                      class="absolute inset-y-0 right-0 flex items-center pr-3 text-muted hover:text-dark"
                      @click="togglePasswordVisibility"
                    >
                      <i :class="showPassword ? 'fa fa-eye' : 'fa fa-eye-slash'"></i>
                    </button>
                  </div>
                </div>
                
                <div class="flex items-center">
                  <input 
                    type="checkbox" 
                    id="remember" 
                    name="remember" 
                    v-model="remember"
                    class="h-4 w-4 text-primary focus:ring-primary border-gray-300 rounded"
                  >
                  <label for="remember" class="ml-2 block text-sm text-dark">记住我</label>
                </div>
                
                <button 
                  type="submit" 
                  class="w-full bg-primary hover:bg-primary/90 text-white font-medium py-3 px-4 rounded-lg transition-colors duration-300 transform hover:-translate-y-1 active:translate-y-0"
                  :disabled="isLoading"
                >
                  {{ isLoading ? '加载中...' : '登录' }}
                </button>
              </form>
              
              <!-- 分隔线 -->
              <div class="my-8 flex items-center">
                <div class="flex-grow h-px bg-gray-200"></div>
                <span class="mx-4 text-sm text-muted">或者使用以下方式登录</span>
                <div class="flex-grow h-px bg-gray-200"></div>
              </div>
              
              <!-- 社交登录 -->
              <div class="grid grid-cols-3 gap-4 mb-8">
                <button 
                  class="flex items-center justify-center p-3 border border-gray-300 rounded-lg hover:bg-gray-50 transition-colors card-hover"
                  @click="socialLogin('wechat')"
                >
                  <i class="fa fa-weixin text-green-500 text-xl"></i>
                </button>
                <button 
                  class="flex items-center justify-center p-3 border border-gray-300 rounded-lg hover:bg-gray-50 transition-colors card-hover"
                  @click="socialLogin('qq')"
                >
                  <i class="fa fa-qq text-blue-400 text-xl"></i>
                </button>
                <button 
                  class="flex items-center justify-center p-3 border border-gray-300 rounded-lg hover:bg-gray-50 transition-colors card-hover"
                  @click="socialLogin('weibo')"
                >
                  <i class="fa fa-weibo text-red-500 text-xl"></i>
                </button>
              </div>
              
              <!-- 注册引导 -->
              <div class="text-center">
                <p class="text-dark">
                  还没有账户? 
                  <a href="#" class="text-primary font-medium hover:underline" @click.prevent="goToRegister">
                    立即注册
                  </a>
                </p>
              </div>
            </div>
          </div>
        </div>
      </main>
      <!-- 登录成功提示 (默认隐藏) -->
      <div 
        id="successToast" 
        class="fixed top-4 right-4 bg-green-500 text-white px-6 py-3 rounded-lg shadow-lg flex items-center transform translate-x-full transition-transform duration-300"
        :class="{ 'translate-x-0': showToast }"
      >
        <i class="fa fa-check-circle mr-2"></i>
        <span>登录成功！正在跳转...</span>
      </div>
    </div>
  </template>
  
  <script>
  import { ref, onMounted } from 'vue';
//   import { login } from '../services/authService'; // 假设存在认证服务
  
  export default {
    name: 'LoginView',
    setup() {
      // 响应式数据
      const email = ref('');
      const password = ref('');
      const remember = ref(false);
      const showPassword = ref(false);
      const isLoading = ref(false);
      const showToast = ref(false);
      const emailSubscription = ref('');
      const mobileMenuOpen = ref(false);
      const bookImage = ref('https://picsum.photos/id/24/600/400');
      const currentYear = ref(new Date().getFullYear());
      
      // 切换密码可见性
      const togglePasswordVisibility = () => {
        showPassword.value = !showPassword.value;
      };
      
      // 处理登录
      const handleLogin = async () => {
        if (!email.value || !password.value) {
          alert('请输入邮箱和密码');
          return;
        }
        
        isLoading.value = true;
        
        try {
          // 调用登录API
          await login(email.value, password.value);
          
          // 显示成功提示
          showToast.value = true;
          
          // 模拟登录成功后跳转
          setTimeout(() => {
            // 实际项目中这里应该是路由跳转
            console.log('登录成功，跳转到首页');
            // 示例：useRouter().push('/');
          }, 1500);
        } catch (error) {
          console.error('登录失败:', error);
          alert('登录失败，请检查邮箱和密码');
        } finally {
          isLoading.value = false;
        }
      };
      
      // 忘记密码
      const forgotPassword = () => {
        console.log('前往忘记密码页面');
        // 实际项目中这里应该是路由跳转
        // useRouter().push('/forgot-password');
      };
      
      // 社交登录
      const socialLogin = (provider) => {
        console.log(`使用${provider}登录`);
        // 实际项目中这里应该是调用社交登录API
      };
      
      // 前往注册页面
      const goToRegister = () => {
        console.log('前往注册页面');
        // 实际项目中这里应该是路由跳转
        // useRouter().push('/register');
      };
      
      // 订阅邮件
      const subscribe = () => {
        if (emailSubscription.value) {
          console.log('订阅邮件:', emailSubscription.value);
          alert('订阅成功！我们将发送最新图书信息到您的邮箱');
          emailSubscription.value = '';
        } else {
          alert('请输入邮箱地址');
        }
      };
      
      // 移动端菜单切换
      const toggleMenu = () => {
        mobileMenuOpen.value = !mobileMenuOpen.value;
        console.log('移动端菜单状态:', mobileMenuOpen.value);
      };
      
      // 页面滚动时添加阴影效果
      onMounted(() => {
        window.addEventListener('scroll', handleScroll);
        
        return () => {
          window.removeEventListener('scroll', handleScroll);
        };
      });
      
      const handleScroll = () => {
        const header = document.querySelector('header');
        if (window.scrollY > 10) {
          header.classList.add('shadow-md');
        } else {
          header.classList.remove('shadow-md');
        }
      };
      
      return {
        email,
        password,
        remember,
        showPassword,
        isLoading,
        showToast,
        emailSubscription,
        mobileMenuOpen,
        bookImage,
        currentYear,
        togglePasswordVisibility,
        handleLogin,
        forgotPassword,
        socialLogin,
        goToRegister,
        subscribe,
        toggleMenu,
        handleScroll
      };
    }
  };
  </script>
  
  <style scoped>
  /* 自定义工具类 - 由于使用Tailwind的@layer，这里可以保留或调整 */
  @layer utilities {
    .content-auto {
      content-visibility: auto;
    }
    .text-shadow {
      text-shadow: 0 2px 4px rgba(0,0,0,0.1);
    }
    .bg-gradient-blue {
      background: linear-gradient(135deg, #5B6ED9 0%, #8A98E8 100%);
    }
    .card-hover {
      transition: all 0.3s ease;
    }
    .card-hover:hover {
      transform: translateY(-5px);
      box-shadow: 0 12px 20px rgba(91, 110, 217, 0.25);
    }
    .text-glow {
        text-shadow: 0 0 10px rgba(255,255,255,0.5); /* 添加文本发光效果 */
      }
      .border-glow {
        box-shadow: 0 0 15px rgba(255,255,255,0.3); /* 添加边框发光效果 */
      }
    }
  </style>